<template>
    <div class="goodslist">
       <router-link class="goodslist-item" to="/home/goodsinfo">
           <img src="../../images/shouji.jpg">
           <h1 class="title">小米(MI)小米NOTE 16g双网通版</h1>
           <div class="info">
               <p class="price">
                   <span class="now">$2195</span>
                   <span class="old">$999</span>
               </p>
               <p class="sell">
                   <span>热卖中</span>
                   <span>剩60件</span>
               </p>
           </div>
       </router-link>

       <div class="goodslist-item" @click="goDetail">
           <img src="../../images/shouji.jpg">
           <h1 class="title">小米(MI)小米NOTE 16g双网通版</h1>
           <div class="info">
               <p class="price">
                   <span class="now">$2195</span>
                   <span class="old">$999</span>
               </p>
               <p class="sell">
                   <span>热卖中</span>
                   <span>剩60件</span>
               </p>
           </div>
       </div>

        <div class="goodslist-item">
           <img src="../../images/shouji.jpg">
           <h1 class="title">小米(MI)小米NOTE 16g双网通版</h1>
           <div class="info">
               <p class="price">
                   <span class="now">$2195</span>
                   <span class="old">$999</span>
               </p>
               <p class="sell">
                   <span>热卖中</span>
                   <span>剩60件</span>
               </p>
           </div>
       </div>

       <mt-button type="danger" size="large">加载更多</mt-button>
    </div>
</template>

<script>
    //获取商品列表数据
    export default{
        data(){
            return{
               pageindex:1,//分页的页数
               goodlist:[]//存放商品列表数据
            }
        },
        methods:{
            // getGoodlist(){
            //     this.$http
            //         .get('api/getgoods?pageindex='+this.pageindex)
            //         .then(result=>{
            //             if(result.body.status===0){
            //                 this.goodlist=this.goodlist.concat(result.body.message);
            //             }
            //         })
            // },
            // getMore(){
            //     this.pageindex++,
            //     getGoodlist()
            // },
            goDetail(){//编程式导航
            //    this.$router.push('/home/goodsinfo')
               this.$router.push({path:'/home/goodsinfo'})
            //    this.$router.push({name: 'goodsinfo'})
            }
        }
    }
</script>

<style lang="less" scoped>
    .goodslist{
        display:flex;
        flex-wrap:wrap;
        justify-content: space-between;
        color:white;
        padding: 5px;
        box-shadow: 0 0 6px #ccc;
        .goodslist-item{
            width: 49%;
            img{
               width: 100%;
            }
            .title{
               font-size:14px;
               color:black;
            }
            .info{
                background-color:burlywood;
                .price{
                    .now{
                       color:red;
                       font-size:25px;
                    }
                    .old{
                       text-decoration:line-through;
                    }
                }
                .sell{
                    display:flex;
                    justify-content: space-between;
                }
            }
        }
    }
</style>

